<template>
	<view class="mPage">
		<!-- 	<uni-nav-bar title="门店首页" statusBar :border="false" :fixed="true" :showPlaceholder="false"
			backgroundColor="transparent" color="#ffffff"></uni-nav-bar> -->
		<view class="top-box">
			<swiper class="swiper-box" :style="{height:'562rpx'}" @change="bannerChange">
				<swiper-item v-for="(item, index) in sliders" :key="index" :style="{height:'562rpx'}">
					<view class="swiper-item" :style="{height:'562rpx'}">
						<image :src="item" mode="scaleToFill" :style="{height:'562rpx'}">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="details-box">
			<view class="item-content">
				<text class="item-name">{{mDetails.store_name}}</text>
				<view class="item-loction-box">
					<image class="item-icon" src="/static/ic_list_loction.png" mode="widthFix"></image>
					<text class="item-desc">{{mDetails.address}}</text>
				</view>

				<view class="btn-desc-box">
					<view class="item-desc-box">
						<image class="item-icon" src="/static/ic_list_time.png" mode="widthFix"></image>
						<text class="item-desc">{{mDetails.work_time}}</text>
					</view>

				</view>

				<view class="btn-view">
					<view class="item-btn"
						@click.stop="actionMenu('map',{latitude:mDetails.lat,longitude:mDetails.lng,name:mDetails.store_name})">
						<image src="/static/ic_list_map.png" mode="aspectFill"></image>
						<text>导航</text>
					</view>
					<view style="border-left: 1rpx solid #EFEFEF;width: 2rpx;height: 25rpx;"></view>
					<view class="item-btn" @click.stop="actionMenu('call',{phoneNumber:mDetails.phone})">
						<image src="/static/ic_list_call.png" mode="aspectFill"></image>
						<text>电话</text>
					</view>
				</view>
			</view>

		</view>

		<baseTitle title="门店公告" />
		<view class="cx-box">
			<text>{{mNoticeList[0]?.title}}</text>
			<image class="item-right-icon" src="@/static/ic_main_right.png" mode="heightFix"></image>
		</view>
		<baseTitle title="服务项目" />
		<scroll-view scroll-x="true" style="width: calc(100vw - 30rpx);margin-left: 5rpx;height: 474rpx;">
			<view class="fw-list">
				<view v-for="(item, index) in mList" :key="index" class="fw-block" @click="toProjectDetails(item)">
					<view class="fw-item">
						<image class="fw-item-cover" :src="item.thumb" mode="aspectFill"></image>
						<text class="fw-title">{{item.name}}</text>
						<text class="fu-desc">{{item.remark}}</text>
					</view>
				</view>
			</view>
		</scroll-view>



		<baseTitle title="店内环境" />
		<scroll-view scroll-x="true"
			style="width: calc(100vw - 30rpx);margin-left: 5rpx;height: 194rpx;margin-bottom: 40rpx;">
			<view class="hj-list">
				<view v-for="(item,index) in mEcvList" :key="index" class="hj-block">
					<view class="hj-item" @click="toLook(mEcvList,index)">
						<image class="hj-item-cover" :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import {
		getNoticeList,
		getStoreDetails,
		getProjectItemList
	} from '@/api/index.js'

	import baseTitle from './components/baseTitle.vue'
	const mDetails = ref({})
	const mList = ref([])
	const mNoticeList = ref([])
	const store_sn = ref();
	const navbarHeight = ref(44);
	const current = ref(0);

	const sliders = ref([])
	const mEcvList = ref([])

	const toLook = (list, index) => {
		uni.previewImage({
			urls: list,
			current: index
		})
	}

	onLoad(() => {
		store_sn.value = uni.getStorageSync("store_sn");
		console.log("store_sn=>", store_sn.value);
		getData();
		getProjectData();
		getNoticeData();

		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
		// navbarHeight.value = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
		// 	'statusBarHeight']) * 2 + 2;
	})

	const getData = async () => {
		let res = await getStoreDetails({
			sn: store_sn.value
		})
		if (res?.code) {
			console.log(res.data);
			mDetails.value = res.data;
			sliders.value = res.data?.slider
			mEcvList.value = res.data?.env_pic
			uni.setStorageSync("tempShopDetails", mDetails.value)
		} else {

		}
	}

	const getProjectData = async () => {
		let res = await getProjectItemList({
			store_sn: store_sn.value
		})
		if (res?.code) {
			console.log(res.data);
			mList.value = res.data ?? []
		}
	}
	const getNoticeData = async () => {
		let res = await getNoticeList({
			store_sn: store_sn.value
		})
		if (res?.code) {
			console.log(res.data);
			mNoticeList.value = res.data.list ?? []
		}
	}
	const bannerChange = (e) => {
		current.value = e.detail.current
	}
	const handleBack = () => {
		uni.navigateBack()
	}

	const actionMenu = (type, value) => {
		console.log(value);
		if (type == 'call') {
			uni.makePhoneCall(value);
		} else if (type == 'map') {
			uni.openLocation({
				name: value.name,
				latitude: value.latitude,
				longitude: value.longitude,
				success: function() {
					console.log('success');
				}
			});
		}
	}

	const toProjectDetails = (item) => {
		navigateTo({
			url: `/subpages/pages/projectDetails/index?code=${item.code}`
		})
	}
</script>

<style lang="scss" scoped>
	.top-box {
		display: flex;
		height: fit-content;
		flex-direction: column;
		position: relative;

		.swiper-box {
			width: 750rpx;
			height: 590rpx;


			.swiper-item {
				width: 750rpx;
				height: 590rpx;

				image {
					display: block;
					height: 590rpx;
					width: 750rpx;
				}
			}
		}
	}

	.details-box {
		width: 700rpx;
		display: flex;
		margin-top: 22rpx;
		margin-left: auto;
		margin-right: auto;
		flex-direction: row;
		align-items: center;
		border-radius: 15rpx;
		background: #FFFFFF;


		.item-content {
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			position: relative;
		}

		.item-desc-box {
			margin-top: 6rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.item-loction-box {
			display: flex;
			align-items: center;
			margin-top: 8rpx;
			flex-direction: row;
		}

		.item-icon {
			width: 18rpx;
			height: 18rpx;
			margin-right: 6rpx;
		}

		.btn-view {
			display: flex;
			flex-direction: row;
			align-items: center;
			right: 26rpx;
			position: absolute;
			bottom: -10rpx;
		}

		.btn-desc-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.item-right-icon {
			width: 10rpx;
			height: 20rpx;
			margin-left: 6rpx;
		}

		.item-btn {
			display: flex;
			flex-direction: row;
			min-height: 70rpx;
			align-items: center;
			justify-content: center;
			min-width: 145rpx;



			&:active {
				opacity: 0.7;
			}

			image {
				width: 38rpx;
				height: 38rpx;
			}

			text {
				font-size: 26rpx;
				color: #434343;
				margin-left: 8rpx;
			}
		}

		.item-name {
			font-size: 36rpx;
			margin-top: 20rpx;
			margin-bottom: 9rpx;
			color: #151515;
		}

		.item-desc {
			font-size: 26rpx;
			margin-bottom: 5rpx;
			color: #7A7A7A;
		}
	}


	.base-title {
		font-size: 34rpx;
		margin-top: 38rpx;
		margin-left: 25rpx;
		color: #151515;
		font-weight: 500;
	}

	.cx-box {
		width: 700rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		margin: 0 auto 18rpx auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;

		text {
			margin: 0 20rpx;
			font-size: 24rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		image {
			margin: 0 20rpx;
			height: 28rpx;
		}
	}

	.fw-list {
		display: inline;
		height: 474rpx;
		white-space: nowrap;

		.fw-block {
			margin-left: 20rpx;
			display: inline-block;
		}

		.fw-item {
			display: flex;
			flex-direction: column;
			width: 340rpx;
			height: 474rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;
			justify-content: space-between;

			.fw-item-cover {
				width: 100%;
				height: 339rpx;
				display: block;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.fw-title {
				font-size: 30rpx;
				color: #151515;
				margin: 0 18rpx;
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.fu-desc {
				font-size: 26rpx;
				color: #2C2C2C;
				margin: 0 18rpx 33rpx 18rpx;
				font-weight: 500;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}


	.hj-list {
		display: inline;
		height: 474rpx;
		white-space: nowrap;

		.hj-block {
			margin-left: 20rpx;
			display: inline-block;
		}

		.hj-item {
			display: flex;
			flex-direction: column;
			width: 274rpx;
			height: 194rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;
			justify-content: space-between;

			.hj-item-cover {
				width: 100%;
				height: 194rpx;
				display: block;
				border-radius: 10rpx;
				overflow: hidden;
			}

		}
	}
</style>